Visual Studio Code¶
常用插件¶
Visual Studio Code Settings Sync¶
使用插件同步vscode配置
其实就是借助的 GitHub Gist,
Gist可以设置为 public 和 secret,
该插件会创建一个 secret 的gist, 所以设置里面有key之类的,
也不是很要紧
使用技巧¶
文件默认换行符设置¶
在vscode设置, 文件默认换行符号
// The default end of line character. Use \n for LF and \r\n for CRLF.
// LF 为 "\n"
// Windows 使用 CRLF 作为换行符
"files.eol": "\n"
设置默认使用的 terminal¶
# windows下默认为 powershell
# 设置示例
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
扩展Visual Studio Code¶
Yo Code - Extension Generator¶
安装¶
npm install -g yo generator-code
官方镜像速度慢, 可以使用淘宝的NPM镜像
添加别名
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"
# 可以添加到 .bashrc 或 .zshrc
$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc
使用cnpm安装
cnpm install -g yo generator-code
运行 Yo Code¶
yo code
第一个扩展插件¶
生成插件¶
yo code
选择 TypeScript 类型插件, 按要求输入信息.
File->Open Folder- 按
F5或者,点击Debug, 点击Start - 会自动打开一个新的
VS Code窗口, 并支持该扩展插件 - 按
⇧⌘P运行命令Hello World. - 此时你的扩展插件会显示一条
Hello World的信息
插件目录结构
运行之后, 插件目录结构如下
.
├── .gitignore
├── .vscode // VS Code integration
│ ├── launch.json
│ ├── settings.json
│ └── tasks.json
├── .vscodeignore
├── README.md
├── src // sources
│ └── extension.ts // extension.js, in case of JavaScript extension
├── test // tests folder
│ ├── extension.test.ts // extension.test.js, in case of JavaScript extension
│ └── index.ts // index.js, in case of JavaScript extension
├── node_modules
│ ├── vscode // language services
│ └── typescript // compiler for typescript (TypeScript only)
├── out // compilation output (TypeScript only)
│ ├── src
│ | ├── extension.js
│ | └── extension.js.map
│ └── test
│ ├── extension.test.js
│ ├── extension.test.js.map
│ ├── index.js
│ └── index.js.map
├── package.json // extension's manifest
├── tsconfig.json // jsconfig.json, in case of JavaScript extension
└── vsc-extension-quickstart.md // extension development quick start
package.json¶
- extension manifest reference
- contribution points
- 每一个VS Code插件都有一个
package.json文件描述自身及功能 - VS Code在启动的时候会读取该文件, 并立刻启用每一个
contributes
示例
{
"name": "myFirstExtension",
"description": "",
"version": "0.0.1",
"publisher": "",
"engines": {
"vscode": "^1.5.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:extension.sayHello"
],
"main": "./out/src/extension",
"contributes": {
"commands": [{
"command": "extension.sayHello",
"title": "Hello World"
}]
},
"scripts": {
"vscode:prepublish": "tsc -p ./",
"compile": "tsc -watch -p ./",
"postinstall": "node ./node_modules/vscode/bin/install",
"test": "node ./node_modules/vscode/bin/test"
},
"devDependencies": {
"typescript": "^2.0.3",
"vscode": "^1.5.0",
"mocha": "^2.3.3",
"@types/node": "^6.0.40",
"@types/mocha": "^2.2.32"
}
}
注意: JavaScript扩展插件不需要scripts, 因为不需要编译.
这个特殊文件描述了
- 一个命令面板的入口, 标签为
"Hello World", 它会调用"extension.sayHello" - 当
"extension.sayHello"被调用的时候, 会请求加载活动事件 - 该事件是使用JavaScript编写的
"./out/src/extension.js"文件
注意: VS Code不会在启动的时候就加载扩展代码. 扩展插件必须描述, 通过activationEvents性能, 在某些条件下被激活(加载).
生成代码¶
生成的扩展插件代码在 extension.ts (或 extension.js,
JavaScript扩展插件)里面
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log('Congratulations, your extension "my-first-extension" is now active!');
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
var disposable = vscode.commands.registerCommand('extension.sayHello', () => {
// The code you place here will be executed every time your command is executed
// Display a message box to the user
vscode.window.showInformationMessage('Hello World!');
});
context.subscriptions.push(disposable);
}
- 每个插件都需要有一个
activate()函数, VS Code将在package.json里面描述的activationEvents发生的时候, 调用一次. - 如果插件使用OS资源, 可以定义一个
deactivate()函数, 当VS Code关闭的时候, 会调用该函数, 执行清扫工作. - 这个插件导入了
vscodeAPI, 并注册了一个命令, 调用命令"extension.sayHello", 显示一条"Hello World"的信息.
注意:package.json里面的contributes会在命令面板增加一个入口, 在.ts/.js里面实现该命令"extension.sayHello"注意: 对于TypeScript插件, VS Code会在每一次执行的时候加载生成的out/src/extension.js文件.